<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增地址</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/addAddress.css?v=01">
</head>

<body>
    <form class="layui-form">
        <!--code  -->
        <input type="hidden" name="weixinCode" class="weixinCode">
        <div class="ipt">
            <input type="text" placeholder="真实姓名" name="name" lay-verify="required" lay-reqtext="请输入姓名">
        </div>
        <div class="ipt">
            <input type="text" placeholder="电话" name="tel" lay-verify="required" lay-reqtext="请输入电话">
        </div>
        <div class="ipt">
            <select id="province" name="province" lay-filter="province" lay-verify="required" lay-reqtext="请选择省份">
                <option value="">请选择省</option>
            </select>
        </div>
        <div class="ipt">
            <select id="city" name="city" lay-filter="city" lay-verify="required" lay-reqtext="请选择市">
                <option value="">请选择市</option>
            </select>
        </div>
        <div class="ipt">
            <select id="area" name="area" lay-filter="area">
                <option value="">请选择县/区</option>
            </select>
        </div>
        <div class="ipt">
            <input type="text" placeholder="详细地址" name="xiangxidizhi">
        </div>
        <div class="shenhe_btn" lay-submit="" lay-filter="demo1">修改地址</div>
    </form>
    <!-- 新增地址 -->

    <script src="./jquery/api.js" charset="utf-8"></script>
    <script src="./jquery/area.js" charset="utf-8"></script>
    <script src="./jquery/jquery.js"></script>
    <script src="./layui/layui.all.js"></script>
    <script>
        // 获取code
        function getQueryVariable(variable) {
            // 参数 window.location.search
            var query = decodeURI(window.location.search.substring(1));
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
        console.log(getQueryVariable('code'))
        // 这时state是地址的id
        console.log(getQueryVariable('state'))
        //初始数据
        var areaData = Area;
        var $form;
        var form;
        var $;
        layui.use(['jquery', 'form', 'layer'], function () {
            $ = layui.jquery;
            form = layui.form;
            layer = layui.layer
            $form = $('form');
            loadProvince();
            $('.weixinCode').val(getQueryVariable('code'))
            // 页面回显
            $.ajax({
                url: api + '/',
                type: 'get',
                dataType: 'json',
                data: {
                    "id": getQueryVariable('state'),
                },
                beforeSend: function () {
                    //弹出的lodinng层
                    layer.load(2, {
                        shade: [0.5, "#333"]
                    });
                },
                success: function (res) {
                    console.log(res)
                    if (res.code == 0) {
                        console.log(res)
                        let data = res.data
                        form.val("layui-form", {
                            weixinCode: data.field.weixinCode,
                            name: data.name,
                            gongsiname: data.province,//省份
                            city: data.city,//市
                            quyu: data.area,//县
                            xiangxidizhi: data.xiangxidizhi,
                            tel: data.tel
                        });
                        form.render(); //更新全部
                    } else {
                        //不等于0时填出的内容
                        layer.msg(res.msg)
                    }
                },
                error: function () {
                    //用户输入与接口内容不对应，显示文字
                    layer.msg("网络繁忙，访问失败")
                },
                complete: function () {
                    //关掉loading
                    layer.closeAll("loading")
                }
            })
            form.on('submit(demo1)', function (data) {
                console.log(1111)
                console.log(data.field)
                console.log(api)
                // var province = document.getElementById("province").value;
                // var city = document.getElementById("city").value;
                // var area = document.getElementById("area").value;
                let datas = {
                    weixinCode: getQueryVariable('code'),
                    name: data.field.name,
                    gongsiname: data.field.province,//省份
                    city: data.field.city,//市
                    quyu: data.field.area,//县
                    xiangxidizhi: data.field.xiangxidizhi,
                    tel: data.field.tel
                }
                var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                if (!reg_tel.test(data.field.tel)) {
                    layer.msg('请输入正确的手机号')
                } else {
                    $.ajax({
                        url: api + "/changeDiZhiBu",
                        type: "post",
                        data: JSON.stringify(datas),
                        success: function (res) {
                            console.log('新增地址')
                            console.log(res)
                            // 成功后刷新code返回上一个页面
                        },
                        error: function () {
                            console.log('网络繁忙')
                        }
                    })
                }
            })
        });
        //加载省数据
        function loadProvince() {
            var proHtml = '';
            for (var i = 0; i < areaData.length; i++) {
                // proHtml += '<option value="' + areaData[i].provinceName + '_' + areaData[i].mallCityList.length + '_' + i + '">' + areaData[i].provinceName + '</option>';
                proHtml += `<option value="${areaData[i].provinceName}">${areaData[i].provinceName}</option>`;
            }
            //初始化省数据
            $form.find('select[name=province]').append(proHtml);
            form.render();
            form.on('select(province)', function (data) {
                $form.find('select[name=area]').html('<option value="">请选择县/区</option>').parent().hide();
                var value = data.value;
                var d = value.split('_');
                var code = d[0];
                var count = d[1];
                var index = d[2];
                if (count > 0) {
                    loadCity(areaData[index].mallCityList);
                } else {
                    $form.find('select[name=city]').parent().hide();
                }
            });
        }
        //加载市数据
        function loadCity(citys) {
            var cityHtml = '<option value="">请选择市</option>';
            for (var i = 0; i < citys.length; i++) {
                // cityHtml += '<option value="' + citys[i].cityName + '_' + citys[i].mallAreaList.length + '_' + i + '">' + citys[i].cityName + '</option>';
                cityHtml += `<option value="${citys[i].cityName}">${citys[i].cityName}</option>`;
            }
            $form.find('select[name=city]').html(cityHtml).parent().show();
            form.render();
            form.on('select(city)', function (data) {
                var value = data.value;
                var d = value.split('_');
                var code = d[0];
                var count = d[1];
                var index = d[2];
                if (count > 0) {
                    loadArea(citys[index].mallAreaList);
                } else {
                    $form.find('select[name=area]').parent().hide();

                }
            });
        }
        //加载县/区数据
        function loadArea(areas) {
            var areaHtml = '<option value="">请选择县/区</option>';
            for (var i = 0; i < areas.length; i++) {
                // areaHtml += '<option value="' + areas[i].areaName + '">' + areas[i].areaName + '</option>';
                areaHtml += `<option value="${areas[i].areaName}">${areas[i].areaName}</option>`;
            }
            $form.find('select[name=area]').html(areaHtml).parent().show();
            form.render();
            form.on('select(area)', function (data) {
            });
        }
    </script>
</body>

</html>